<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置 - OpenAI聊天助手</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .settings-container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        h1 {
            color: #333;
            margin-bottom: 30px;
            font-size: 24px;
        }

        .setting-item {
            margin-bottom: 20px;
        }

        .setting-item label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: bold;
        }

        .setting-item input[type="text"], .setting-item input[type="password"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .select-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            background-color: white;
            cursor: pointer;
        }

        .select-input:focus {
            outline: none;
            border-color: #007bff;
        }

        .setting-item .description {
            margin-top: 5px;
            font-size: 12px;
            color: #666;
        }

        .save-button {
            background-color: #007AFF;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .save-button:hover {
            background-color: #0056b3;
        }

        .success-message {
            display: none;
            color: #4CAF50;
            margin-top: 10px;
            padding: 10px;
            background-color: #E8F5E9;
            border-radius: 4px;
        }

        .api-key-container {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
        }

        .api-key-container input[type="text"],
        .api-key-container input[type="password"] {
            width: 100%;
            padding: 10px;
            padding-right: 40px; /* 为图标留出空间 */
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        .api-key-container input[type="text"]:focus,
        .api-key-container input[type="password"]:focus {
            outline: none;
            border-color: #007AFF;
            box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
        }

        .toggle-password {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            width: 32px;
            height: 32px;
            padding: 6px;
            cursor: pointer;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s ease;
            z-index: 2;
        }

        .toggle-password:hover {
            color: #333;
        }

        .toggle-password:focus {
            outline: none;
            color: #007AFF;
        }

        .eye-icon {
            display: block;
            width: 20px;
            height: 20px;
        }

        /* 控制两个图标的显示/隐藏 */
        .eye-icon .eye-closed {
            display: none;
        }

        .toggle-password.showing .eye-icon .eye-open {
            display: none;
        }

        .toggle-password.showing .eye-icon .eye-closed {
            display: block;
        }

        /* 移除之前重复的样式 */
        .api-key-container input {
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="settings-container">
        <h1>设置</h1>
        <div class="setting-item">
            <label for="api-provider">API 服务商</label>
            <select id="api-provider" class="select-input">
                <option value="openai">OpenAI</option>
                <option value="deepseek">DeepSeek</option>
            </select>
            <div class="description">选择要使用的 AI 服务提供商</div>
        </div>
        <div class="setting-item">
            <label for="api-key">API密钥</label>
            <div class="api-key-container">
                <input type="password" id="api-key" placeholder="请输入您的OpenAI API密钥">
                <button type="button" id="toggle-password" class="toggle-password" aria-label="显示/隐藏密钥">
                    <svg class="eye-icon" viewBox="0 0 24 24" width="20" height="20">
                        <path class="eye-open" fill="currentColor" d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                        <path class="eye-closed" fill="currentColor" d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>
                    </svg>
                </button>
            </div>
            <div class="description" id="api-key-description">请在此处输入您的OpenAI API密钥，它将被安全地存储在您的浏览器中。</div>
        </div>

        <div class="setting-item">
            <label for="openai-model-select">OpenAI 模型</label>
            <select id="openai-model-select" class="select-input model-select">
                <option value="gpt-4">GPT-4（功能最强大）</option>
                <option value="gpt-4-turbo">GPT-4 Turbo（更快速的GPT-4）</option>
                <option value="gpt-3.5-turbo">GPT-3.5 Turbo（经济实惠）</option>
            </select>
            <div class="description">选择要使用的OpenAI模型。不同模型有不同的能力和价格</div>
        </div>

        <div class="setting-item">
            <label for="deepseek-model-select">DeepSeek 模型</label>
            <select id="deepseek-model-select" class="select-input model-select">
                <option value="deepseek-chat">DeepSeek Chat</option>
                <option value="deepseek-reasoner">DeepSeek Reasoner</option>
            </select>
            <div class="description">选择要使用的DeepSeek模型</div>
        </div>

        <div class="setting-item">
            <label for="language-select">默认回复语言</label>
            <select id="language-select" class="select-input">
                <option value="chinese">中文</option>
                <option value="english">English</option>
            </select>
            <div class="description">选择默认的回复语言。</div>
        </div>

        <button id="save-settings" class="save-button">保存设置</button>
        <div id="success-message" class="success-message">设置已保存成功！</div>
    </div>
    <script src="settings.js"></script>
</body>
</html>
